<!-- 到期设备 -->
<template>
  <el-card shadow="never" class="table-container">
    <div class="app-container">
      <div class="titleMolde">版本管理
      </div>
      <div class="Filters">
        <el-input v-model="queryParams.upgradeName" style="width: 200px" placeholder="名称" />
        <el-button type="primary" class="mrg-lf-10" @click="handleQuery">查询</el-button>
        <el-button type="primary" class="mrg-lf-10" v-hasPerm="['deviceModel:add']"
          @click="manageVersions('')">添加</el-button>
      </div>
      <el-table v-loading="loading" :data="pageData">
        <el-table-column label="序号" align="center" type="index" width="60" />
        <el-table-column label="版本名称" align="center" prop="upgradeName" />
        <el-table-column label="软件版本" align="center" prop="softVer" />
        <el-table-column label="模块名称" align="center" prop="module" />
        <el-table-column label="厂商名称" align="center" prop="manufacturer" />
        <el-table-column label="描述" align="center" prop="remark" />
        <el-table-column label="操作" align="center" fixed="right" width="220">
          <template #default="scope">
            <el-button title="编辑" type="primary" v-hasPerm="['deviceModel:edit']" icon="edit" circle
              @click.prevent="manageVersions(scope.row.id)" />
            <el-button title="删除" type="danger" v-hasPerm="['deviceModel:delete']" icon="delete" circle
              @click.prevent="deleteRow(scope.row)" />
          </template>
        </el-table-column>
      </el-table>
      <pagination @pagination="handleQuery" v-if="queryParams.pages.total > 0" v-model:total="queryParams.pages.total"
        v-model:page="queryParams.pages.current" v-model:limit="queryParams.pages.size" />
    </div>
  </el-card>

  <el-dialog destroy-on-close class="dialogTableVisibleclass" @close="handleClose" v-model="outerVisible"
    :title="outer.title">
    <div class="div-container">
      <el-form ref="AddruleFormRef" :rules="rules" :model="versionFrom" label-width="auto" style="width: 600px"
        class="form-container">
        <el-form-item label="版本名称" prop="upgradeName">
          <el-input v-model="versionFrom.upgradeName" />
        </el-form-item>
        <el-form-item label="厂商名称" prop="manufacturer">
          <el-input v-model="versionFrom.manufacturer" />
        </el-form-item>
        <el-form-item label="模块名称" prop="module">
          <el-input v-model="versionFrom.module" />
        </el-form-item>
        <el-form-item label="软件版本" prop="softVer">
          <el-input v-model="versionFrom.softVer" />
        </el-form-item>
        <el-form-item label="版本地址" prop="url">
          <el-upload class="upload-demo" :action="UpdateUrl" name="file" :headers="header" :multiple="false"
            :show-file-list="false" :on-success="handleSuccess" :before-upload="beforeUpload">
            <el-button size="small" type="primary">
              点击上传
            </el-button>
            {{ versionFrom.url }}
          </el-upload>
        </el-form-item>
        <el-form-item label="版本描述" prop="remark">
          <el-input v-model="versionFrom.remark" type="textarea" />
        </el-form-item>
      </el-form>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="outerVisible = false">关闭</el-button>
        <el-button type="primary" @click="clickSave(AddruleFormRef)">确定</el-button>
      </div>
    </template>
  </el-dialog>

</template>

<script setup lang="ts">
defineOptions({
  name: "upgrade",
  inheritAttrs: false,
});
import { TOKEN_KEY } from "@/enums/CacheEnum";
import DeviceSpecApi, { FencesPageQuery, DeviceTypeReq } from "@/api/deviceSpec";

import UpgradeAPI, { UpgradePageQuery, UpgradeFormData } from "@/api/upgrade";


import type { FormInstance, FormRules } from 'element-plus'
const AddruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<UpgradeFormData>>({
  upgradeName: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  manufacturer: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  module: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  softVer: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ],
  url: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
  ]
})

let outerVisible = ref(false);
let outer = ref({
  title: '新增设备规格',
  id: '',
});
const loading = ref(false);
let pageData = ref()
/** 用户查询参数  */
let queryParams = reactive<UpgradePageQuery>({
  "pages": {
    "current": 1,
    "size": 10,
    "startTime": "",
    "endTime": "",
    "orders": [
      {
        "column": "",
        "asc": true
      }
    ]
  },
  "upgradeName": undefined,
  "customerId": undefined,
});
let versionFrom = reactive<UpgradeFormData>({
  upgradeName: '',
  manufacturer: '',
  module: '',
  softVer: '',
  url: '',
  remark: '',
});
let UpdateUrl = import.meta.env.VITE_APP_BASE_API + '/v3/manager/file/upload'
let header = {
  'Authorization': localStorage.getItem(TOKEN_KEY)
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  UpgradeAPI.page(queryParams)
    .then((data) => {
      pageData.value = data.records;
      queryParams.pages.total = data.total;
      queryParams.pages.current = data.current;
    })
    .finally(() => {
      loading.value = false;
    });
}

function manageVersions(id = '') {
  versionFrom.upgradeName = ''
  outerVisible.value = true
  if (id) {
    outer.value.title = '编辑版本'
    outer.value.id = id
    handlesearchID(id)
  } else {
    outer.value.title = '新增版本'
  }
}
function handlesearchID(id: string) {
  UpgradeAPI.searchID(id)
    .then((data) => {
      versionFrom.id = data.id
      versionFrom.manufacturer = data.manufacturer
      versionFrom.upgradeName = data.upgradeName
      versionFrom.module = data.module
      versionFrom.softVer = data.softVer
      versionFrom.url = data.url
      versionFrom.remark = data.remark
    })
}
const clickSave = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (outer.value.id) {
        UpgradeAPI.editSave(versionFrom)
          .then((data) => {
            console.log(data);
            handleQuery();
            ElMessage.success("修改用户成功");

          })
          .finally(() => {
            outerVisible.value = false

          });
      } else {
        UpgradeAPI.addUpgradePack(versionFrom)
          .then((data) => {
            console.log(data);
            handleQuery();
            ElMessage.success('添加成功');

          })
          .finally(() => {
            outerVisible.value = false

          });
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}

function deleteRow(datas: any) {
  UpgradeAPI.deleteSave(datas.id)
    .then((data) => {
      handleQuery();
      ElMessage.success('删除成功');
    })
    .finally(() => {
    });
}
function handleSuccess(res: any) {
  console.log(res)
  if (res.code === 'R200') {
    ElMessage.success('文件上传成功');
    versionFrom.url = res.data.url
    versionFrom.md5 = res.data.md5
  } else if (res.code === 50008) {
    ElMessage.warning(res.message);
  } else {
    ElMessage.error(res.message);
  }
}
function beforeUpload(file: any) {
  const isLt2M = file.size / 1024 / 1024 < 2
  if (!isLt2M) {
    ElMessage.error('上传文件大小不能超过 2MB!');

  }
  return isLt2M
}

function handleClose() {
  outer.value.id = ''
  // 重新赋值
  Object.assign(versionFrom, {
    name: '',
    manufacturer: '',
    Module: '',
    SoftVer: '',
    url: '',
    info: ''
  });
}



onMounted(() => {
  handleQuery();
});
</script>
<style lang="scss" scoped>
.mrg-lf-10 {
  margin-left: 10px;
}

.fontColor_333 {
  :deep(.el-input__inner) {
    color: #333;
  }
}

.titleMolde {
  font-weight: bold;
  position: relative;
  display: flex;
  padding-left: 15px;
  justify-content: space-between;
  align-items: center;

  &::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    left: 4px;
    top: 6px;
    background: #2cdfe5b5;
  }

  &::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #09e0e7;
    position: absolute;
    left: 0;
    top: 2px;
  }

}

.app-container {
  position: relative;
  padding: 10px;

  .allTabContent {
    display: flex;
    align-items: center;
    position: absolute;
    top: 15px;
    right: 0;

    div {
      margin-left: 26px;
      font-weight: 700;

      span {
        margin-left: 8px;
      }
    }
  }
}

.Filters {
  margin: 10px 0;
  display: flex;
  align-items: center;

  .el-segmented {
    --el-segmented-item-selected-color: var(--el-text-color-primary);
    --el-segmented-item-selected-bg-color: #5cadff;
    --el-border-radius-base: 16px;
  }

  &>div {
    margin-right: 5px;
  }
}

.div-container {
  display: flex;
  width: 100%;
  color: #333;

  .div-left-container {
    width: 420px;

    .div_search {}
  }

  .div-right-container {
    width: calc(100% - 420px - 10px);
    margin-left: 10px;
    position: relative;

    #myPageTop {
      position: absolute;
      top: 60px;
      left: 10px;
      z-index: 6;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;

      #tipinput {
        background-color: #fff;
        color: #333;
        border: 1px solid #ccc;
        padding: 5px;
      }
    }
  }

  :deep(.form-container) {
    .el-form-item__label {
      color: #333;
    }

    .el-input__inner {
      color: #333;
    }

    .el-textarea__inner {
      color: #333;

    }
  }
}
</style>
<style>
.amap-sug-result {
  z-index: 9999 !important;
  color: #333
}
</style>
